<template>
    <div class="item">
        <div class="head" @click="toggle">
            <span>{{title}}</span>
            <a href="#" :class =" is_open ? 'active' : '' ">^</a>
        </div>
        
        <transition name="fade">
            <div class="con" v-show="is_open">
                <slot></slot>
            </div>
        </transition>
    </div>
</template>

<!-- <script>
   export default {
       props:['title'],
       setup(props,context){

            return {

            }
       }
   }
</script> -->
<script setup>
    // import { ref } from 'vue';
    // import { defineEmits } from 'vue';

    const props = defineProps({
        title: String,
        is_open:Boolean
    });

    // 定义 emit 函数，可以指定触发的事件名
    const emit = defineEmits(['changeActive']);

    const toggle = ()=>{
        emit('changeActive')
    }

</script>

<style lang="less">
    .item {
        border: 1px solid #cccccc;
        /* border-radius: 6px; */
        margin-bottom: 1px;

        .head {
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #cccccc;
            padding: 10px;

            a{
                text-decoration: none;
                color: black;
                font-size: 18px;

                &.active{
                    transform: rotate(180deg);
                    transition:transform 0.3s ease-in;
                }
            }
        }

        .con{
            padding: 10px;
            /* display: none; */
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: height 0.1s linear;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
        height: 0;
    }
</style>